<!-- 宿舍管理 -->
<template>
  <div class="roomMan-container">
    <TitleBar title="宿舍楼基础信息"></TitleBar>
    <ConditionFilter @headleSubmit="headleSubmit"/>
    <DisplayBox :content="DisplayBoxDataRef" :Loading="isLoadingRef"></DisplayBox>
    <TitleBar title="宿舍成员"></TitleBar>
    <DormitoryMembers :tableData="DormitoryMembersRef" :Loading="isLoadingRef"></DormitoryMembers>
    <TitleBar title="宿舍评价"></TitleBar>
    <Evaluate :roomNoId="roomNoIdRef" v-bind="$attrs" :DormitoryMembers="DormitoryMembersRef.length"></Evaluate>
  </div>
</template>

<script setup>
import {ref} from "vue"
import TitleBar from "@/components/TitleBar/index.vue";
import ConditionFilter from "@/components/ConditionFilter/index.vue";
import DisplayBox from "@/components/DisplayBox/index.vue"
import DormitoryMembers from "./components/DormitoryMembers.vue";
import Evaluate from "./components/Evaluate.vue"
const isLoadingRef = ref(false)
// 展示框数据
const DisplayBoxDataRef = ref([
  {
    IconColor:"#40c9c6",
    Icon:"roomIcon",
    title:"房间号",
    text:""
  },
  {
    IconColor:"#36a3f7",
    Icon:"floor",
    title:"楼层",
    text:""
  },
  {
    IconColor:"#f4516c",
    Icon:"dormitory",
    title:"宿舍楼",
    text:""
  },
  {
    IconColor:"#34bfa3",
    Icon:"account",
    title:"宿舍最大人数",
    text:""
  }
])
// 宿舍成员信息
const DormitoryMembersRef = ref([])
// 宿舍id
const roomNoIdRef = ref();
const headleSubmit = (data) =>{
  if(!data.roomData){
    ElMessage.error('请完成选择框')
    return 
  }
  isLoadingRef.value = true;
  roomNoIdRef.value = data.roomData[0].id
  DisplayBoxDataRef.value[0].text = data.roomData[0].roomNo;
  DisplayBoxDataRef.value[1].text = data.floorData[0].floorNumber;
  DisplayBoxDataRef.value[2].text = data.dormitoryData[0].DormitoryName;
  DisplayBoxDataRef.value[3].text = data.roomData[0].roomCapacity;
  DormitoryMembersRef.value = data.roomData[0].movingInStudents
  isLoadingRef.value = false;
}
</script>

<style lang="less" scoped>
.roomMan-container{
  width: 100%;
  .displayBox-container{
    margin-top: 30px;
  }
}
</style>